<!-- 方案配置 -->
<template>
    <div class="mainContent">
        <div class="mainContentLeft">
            <div class="searchContent" style="display: flex">
                <custom-button type="add" @addClick="addClick" style="margin-left: 10px; margin-right: 5px"></custom-button>
                <custom-button type="edit" @editClick="editClick" style="margin-right: 5px"></custom-button>
                <custom-button type="delete" @deleteClick="deleteClick" title="删除"></custom-button>
            </div>

            <div class="card">身份名称</div>
            <div class="list">
                <div :class="getCardClass(item)" v-for="(item, index) in listItem" v-bind:key="index" @click="cardClick(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="mainContentRight">
            <el-table :data="tableData" style="width: 100%" size="small" border>
                <el-table-column prop="type" label="匹配分类" width="180">
                    <template slot-scope="scope">
                        <label class="bold">{{ scope.row.type }}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="detail" label="配置详情">
                    <template slot-scope="scope">
                        <div v-for="(item, index) in scope.row.detail" v-bind:key="index" class="itemContent">
                            <label>{{ item.name }}：</label>
                            <span>{{ item.value }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="操作" width="80">
                    <template slot-scope="scope">
                        <a href="javascript:void(0)" @click="editRow(scope.row.id, scope.$index)" class="a">编辑</a>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-if="dialogShow" style="text-align: left">
            <custom-dialog :title="dialogTitle" size="tiny" @dialogClose="dialogTableClose">
                <form-index
                    :formConfig="formTableConfig"
                    @submit="tableSubmit"
                    :type="tableType"
                    @formInputChange="formInputChange"
                    ref="form"
                >
                </form-index>
            </custom-dialog>
        </div>

        <div v-if="edit1" style="text-align: left">
            <FenShiDuan @close="edit1 = false"></FenShiDuan>
        </div>
        <div v-if="edit2" style="text-align: left">
            <Exinfuzai @close="edit2 = false"></Exinfuzai>
        </div>
        <div v-if="edit3" style="text-align: left">
            <Zuidagonglv @close="edit3 = false"></Zuidagonglv>
        </div>
        <div v-if="edit4" style="text-align: left">
            <Jiejiari @close="edit4 = false"></Jiejiari>
        </div>
        <div v-if="edit5" style="text-align: left">
            <Bendiyufufei @close="edit5 = false"></Bendiyufufei>
        </div>
        <div v-if="edit6" style="text-align: left">
            <Huiluqianfei @close="edit6 = false"></Huiluqianfei>
        </div>
        <div v-if="edit7" style="text-align: left">
            <Huilutiaodian @close="edit7 = false"></Huilutiaodian>
        </div>
        <div v-if="edit8" style="text-align: left">
            <FenShixianliu @close="edit8 = false"></FenShixianliu>
        </div>
        <div v-if="edit9" style="text-align: left">
            <Dingjiafangan @close="edit9 = false"></Dingjiafangan>
        </div>
        <div v-if="edit10" style="text-align: left">
            <Guowentiaodian @close="edit10 = false"></Guowentiaodian>
        </div>
        <div v-if="edit11" style="text-align: left">
            <Yingjibaodian @close="edit11 = false"></Yingjibaodian>
        </div>
        <div v-if="edit12" style="text-align: left">
            <Buzhuxiafa @close="edit12 = false"></Buzhuxiafa>
        </div>
        <div v-if="edit13" style="text-align: left">
            <Buzhuhexiao @close="edit13 = false"></Buzhuhexiao>
        </div>
    </div>
</template>

<script>
import {cardForm} from '@/assets/form/controlCenter/cardForm'
import customDialog from '@/components/customComponents/customDialog'
import customButton from '@/components/customComponents/customForm/customButton'
import formIndex from '@/components/customComponents/customForm/formIndex'
import {PopupCommon} from '@/libs/popupCommon'
import {CardList, configTableList} from '@/mockData/controlCenter'
import Bendiyufufei from './components/schemeConfigurationDialog/bendiyufufei.vue'
import Buzhuhexiao from './components/schemeConfigurationDialog/buzhuhexiao.vue'
import Buzhuxiafa from './components/schemeConfigurationDialog/buzhuxiafa.vue'
import Dingjiafangan from './components/schemeConfigurationDialog/dingjiafangan.vue'
import Exinfuzai from './components/schemeConfigurationDialog/exinfuzai.vue'
import FenShiDuan from './components/schemeConfigurationDialog/fenshiduan.vue'
import FenShixianliu from './components/schemeConfigurationDialog/fenshixianliu.vue'
import Guowentiaodian from './components/schemeConfigurationDialog/guowentiaodian.vue'
import Huiluqianfei from './components/schemeConfigurationDialog/huiluqianfei.vue'
import Huilutiaodian from './components/schemeConfigurationDialog/huilutiaodian.vue'
import Jiejiari from './components/schemeConfigurationDialog/jiejiari.vue'
import Yingjibaodian from './components/schemeConfigurationDialog/yingjibaodian.vue'
import Zuidagonglv from './components/schemeConfigurationDialog/zuidagonglv.vue'
export default {
    name: 'schemeConfiguration',
    components: {
        customButton,
        formIndex,
        customDialog,
        FenShiDuan,
        Exinfuzai,
        FenShixianliu,
        Guowentiaodian,
        Huiluqianfei,
        Huilutiaodian,
        Jiejiari,
        Yingjibaodian,
        Zuidagonglv,
        Bendiyufufei,
        Dingjiafangan,
        Buzhuxiafa,
        Buzhuhexiao
    },
    data() {
        return {
            /** 编辑 begin*/
            edit1: false,
            edit2: false,
            edit3: false,
            edit4: false,
            edit5: false,
            edit6: false,
            edit7: false,
            edit8: false,
            edit9: false,
            edit10: false,
            edit11: false,
            edit12: false,
            edit13: false,
            /** 编辑 end*/

            dialogShow: false,
            tableType: 'add',
            dialogTitle: '新增表',
            listItem: CardList,
            cardId: '',
            tableData: configTableList,
            formTableConfig: cardForm
        }
    },
    computed: {},
    created() {},
    methods: {
        formInputChange(e) {
            console.log(e)
        },
        tableSubmit(d) {
            if (d.id) {
                var item = this.listItem
                item.find((t) => t.id == d.id).name = d.name
                item.find((t) => t.id == d.id).remark = d.remark
                this.listItem = item
                this.cardId = ''
                PopupCommon.message('success', '修改成功')
            } else {
                d.id = Math.random() * 100000
                this.listItem.push(d)
                PopupCommon.message('success', '新增成功')
            }
            this.dialogShow = false
        },
        dialogTableClose() {
            this.dialogShow = false
        },
        editRow(id, index) {
            index = index + 1
            if (index == 0) {
                this.edit1 = true
            }
            if (index == 1) {
                this.edit2 = true
            }
            if (index == 2) {
                this.edit3 = true
            }
            if (index == 3) {
                this.edit4 = true
            }
            if (index == 4) {
                this.edit5 = true
            }
            if (index == 5) {
                this.edit6 = true
            }
            if (index == 6) {
                this.edit7 = true
            }
            if (index == 7) {
                this.edit8 = true
            }
            if (index == 8) {
                this.edit9 = true
            }
            if (index == 9) {
                this.edit10 = true
            }
            if (index == 10) {
                this.edit11 = true
            }
            if (index == 11) {
                this.edit12 = true
            }
            if (index == 12) {
                this.edit13 = true
            }
            console.log(id, index)
        },
        getCardClass(item) {
            return item.id == this.cardId ? 'item hover' : 'item'
        },
        cardClick(e) {
            this.cardId = e.id
        },
        deleteClick() {
            if (this.cardId == '') {
                PopupCommon.message('info', '请选择一个身份名称')
                return
            }
            var self = this
            var item = this.listItem.find((t) => t.id == this.cardId)
            var itemIndex = this.listItem.findIndex((t) => t.id == this.cardId)
            PopupCommon.confirm(`确定删除【${item.name}】？`).then(() => {
                self.listItem.splice(itemIndex, 1)
                self.cardId = ''
                PopupCommon.message('success', '删除成功')
            })
        },
        editClick() {
            if (this.cardId == '') {
                PopupCommon.message('info', '请选择一个身份名称')
                return
            }
            var item = this.listItem.find((t) => t.id == this.cardId)
            this.tableType = 'edit'
            let formConfigItem = this.formTableConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == 'fieldName') {
                        t.filedValue = item[t[res]]
                    }
                })
            })
            this.formTableConfig = formConfigItem
            this.dialogShow = true
            this.dialogTitle = '编辑身份名称'
        },
        addClick() {
            let formConfigItem = this.formTableConfig
            formConfigItem.map((t) => {
                Object.keys(t).map((res) => {
                    if (res == 'fieldName') {
                        t.filedValue = ''
                    }
                })
            })
            this.formTableConfig = formConfigItem
            this.tableType = 'add'
            this.dialogShow = true
            this.dialogTitle = '新增身份名称'
        }
    }
}
</script>

<style lang="scss" scoped>
.mainContent {
    background-color: #f5f5f5;
    height: calc(100vh - 100px);
    // margin: 10px 0;
    width: 100%;
    display: flex;
    .mainContentLeft {
        width: 250px;
        height: 100%;
        padding: 10px 0;
        border-right: 1px solid #ebeef5;
        background: #fff;
        .card {
            color: #2680fa;
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            background-color: #d8e8ff;
            width: 234px;
            margin-left: 8px;
            margin-top: 15px;
            position: relative;
            margin-bottom: 10px;
            padding-left: 10px;
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 6px;
                height: 100%;
                content: '';
                background-color: #2680fa;
            }
        }
        .list {
            text-align: center;
            width: 234px;
            margin-left: 8px;
            height: calc(100vh - 200px);
            overflow: auto;
            .item {
                font-size: 16px;
                color: #333;
                height: 35px;
                line-height: 35px;
                cursor: pointer;
                &:hover {
                    background-color: #d8e8ff;
                }
            }
            .hover {
                background-color: #d8e8ff;
            }
        }
    }
    .mainContentRight {
        flex: 1;
        height: 100%;
        margin: 0 0 10px 10px;
        background: #fff;
        width: calc(100% - 260px);
        .bold {
            font-size: 14px;
            font-weight: bold;
        }
        .itemContent {
            width: 25%;
            float: left;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            label {
                color: #888;
            }
            span {
                color: #333;
            }
        }
        .a {
            color: #418ffb;
            text-decoration: none;
        }
    }
}
</style>
